<template>
  <div class="discount">
    <search-banner :banners="banners"/>
    <function-area/>
    <hot-game  :hotBanners="hotBanners"/>
    <game-content :hotList="hotList" :newestList="newestList"/>
  </div>
</template>

<script>
import FunctionArea from '../childComps/FunctionArea.vue'
import HotGame from '../childComps/HotGame.vue'
import SearchBanner from '../childComps/SearchBanner.vue'
import GameContent from '../gameContent/GameContent.vue'

export default {
  components: {
    SearchBanner,
    FunctionArea,
    GameContent,
    HotGame,
  },
  data() {
    return {
      banners: [],
      hotBanners: [],
      hotList: [],
      newestList: [],
    };
  },
  created() {
    this.getHomeDiscount();
  },
  methods: {
    getHomeDiscount() {
      this.axios.get("/home_discount.json").then((res) => {
        this.banners = res.data.slider_list;
        this.hotBanners = res.data.recommend_list;
        this.hotList = res.data.hot_list
        this.newestList = res.data.newest_list
      });
    },
  },
}
</script>

<style lang="less" scoped>
.discount {
  position: fixed;
  width: 10rem;
  overflow: auto;
  top: 1.173333rem;
  bottom: 1.306667rem;
  left: 50%;
  transform: translateX(-50%);
  
}

.discount::-webkit-scrollbar {
  display:none
}
</style>